<template>
  <div class="right-detail">
    <div class="right-detail-content">
      <h2 class="right-detail-content-head">盛大汽车权益</h2>
      <van-cell-group class="right-detail-content-body">
        <van-cell class="right-cell" title="权益总量" :value="details.interests" />
        <van-cell class="right-cell" title="权益发放时间" :value="details.createTime"/>
        <van-cell class="right-cell" title="权益失效时间" :value="details.expireTime" />
        <van-cell class="right-cell right-status" title="权益状态" :value="exchangeStatus(details.status)"/>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import {getRightDetail} from './../../../api/rightsInterests'
export default {
  name: 'right-detail',
  data () {
    return {
      details: [],
      id: this.$route.query.id ? this.$route.query.id : sessionStorage.getItem('rightsId')
    }
  },
  created () {
    if (this.$route.query.id) {
      sessionStorage.setItem('rightsId', this.$route.query.id);
    }
    this.getDetailsById();
  },
  methods: {
    getDetailsById () {
      const obj = {id: this.id, status: 1};
      getRightDetail(obj).then(res => {
        this.details = res.data;
      }).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
    },
    exchangeStatus(val) {
      let text = '';
      if (val === 1 || val === 2) {
        text = '有效';
      } else {
        text = '失效';
      }
      return text;
    }
  }
}
</script>

<style lang="less">
.right-detail{
  // padding-top: 30px;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #F2F2F2;
  .right-detail-content{
    background: #fff;
    .right-detail-content-head{
      text-align: center;
      height:50px;
      font-size:18px;
      font-family:PingFang SC;
      font-weight:300;
      line-height:50px;
      color:rgba(51,51,51,1);
      opacity:1;
      border-bottom: 1px solid #E6F1F4;
    }
    .right-detail-content-body{
      padding: 10px 20px;
      .right-cell{
        height: 40px !important;
        line-height: 40px !important;
        padding: 0px;
        font-size: 14px !important;
        .van-cell__title{
          color: #888888 !important;

        }
      }
      .right-status{
        .van-cell__value{
          color: #EDA23D !important;
        }
      }
      .van-cell:not(:last-child)::after {
        border-bottom: none !important;
      }
    }
  }
}
</style>
